import React, { Component } from 'react'

export default class Child extends Component {
  state = {
    title: 'child title',
    color: '#f00',
    prevColor: ''
  }
  // componentDidMount() {
  //   console.log('child componentDidMount')
  // }

  // UNSAFE_componentWillReceiveProps() {
  //   console.log('UNSAFE_componentWillReceiveProps')
  // }
  
  // shouldComponentUpdate(nextProps, nextState) {
  //   console.log('shouldComponentUpdate')
  //   if (this.props.title !== nextProps.title) {
  //     return true
  //   } else {
  //     return false
  //   }
  // }

  // 静态函数是个纯函数，此函数不能做副作用处理的业务
  static getDerivedStateFromProps(props, state) {
    // console.log('getDerivedStateFromProps')

    // 此返回值会和State进行merge
    // return {
    //   color: props.color
    // }
    
    if (props.color !== state.prevColor) {
      return {
        color: props.color,
        prevColor: props.color
      }
    }

    // 不对State做改变
    return null
  }

  handleClick = () => {
    this.setState({
      title: 'abc'
    })
  }

  handleChangeColor = () => {
    this.setState({
      color: 'grey'
    })
  }

  handleChangeTitle = () => {
    this.setState({
      title: 'new child title'
    })
  }

  handleForceUpdateClick = () => {
    this.forceUpdate()
  }

  // 父组件render调用，子组件render一定调用
  // 前提是没有优化（优化方法：PureComponent, shouldComponentUpdate）
  render() {
    // console.log('child render')
    return (
      <div>
        <h1>child</h1> 
        {/* <button onClick={this.handleClick}>child click</button>
        <button onClick={this.handleForceUpdateClick}>forceUpdate</button>
        <div>{this.state.title}</div> */}
        <span id="title" style={{color: this.state.color}}>{this.state.title}</span>
        <div style={{color: this.props.color}}>content</div>
        <button onClick={this.handleChangeColor}>change color</button>
        <button onClick={this.handleChangeTitle}>change title</button>
      </div>
    )
  }

  // UNSAFE_componentWillUpdate() {
  //   console.log('UNSAFE_componentWillUpdate')
  // }

  getSnapshotBeforeUpdate() {
    let width = document.querySelector('#title').getBoundingClientRect().width
    return width
  }

  componentDidUpdate(prevProps, prevState, snapshot) {
    console.log(snapshot)
    let newWidth = document.querySelector('#title').getBoundingClientRect().width
    console.log(newWidth)
    // console.log('componentDidUpdate')
  }

  // componentWillUnmount() {
  //   console.log('componentWillUnmount')
  // }
}
